<template>
  <view class="container">
    <view class="content">
      <view class="logo-wrapper">
        <u-icon name="locked" size="100" color="#42b479" :custom-style="{marginBottom: '20rpx'}"></u-icon>
        <text class="welcome-text">找回密码</text>
        <text class="sub-text">输入手机号和验证码重置密码</text>
      </view>
      
      <view class="wrapper">
        <view class="input-content">
          <u-form :model="form" ref="uForm">
            <u-form-item>
              <u-input placeholder="请输入手机号码" v-model="form.mobile" type="number" 
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="phone" size="40" color="#999"></u-icon>
            </u-form-item>
            
            <u-form-item class="captcha_box">
              <u-input v-model="form.captcha_code" placeholder="请输入图形验证码" 
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="photo" size="40" color="#999"></u-icon>
              <image slot="right" class="captcha" @click="getCaptcha()" :src="captcha.img" mode="aspectFit"></image>
            </u-form-item>
            
            <u-form-item>
              <u-input class="input-code" v-model="form.code" :maxlength="6" type="number"
                       placeholder="请输入短信验证码" 
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="email" size="40" color="#999"></u-icon>
              <u-button type="primary" slot="right" size="mini" :disabled="!get_code" @click="getCode()">{{ code_text }}</u-button>
            </u-form-item>
            
            <u-form-item>
              <u-input type="password" placeholder="请输入新密码" v-model="form.password" 
                       :custom-style="{padding: '0 24rpx', fontSize: '32rpx', height: '80rpx', lineHeight: '80rpx'}"/>
              <u-icon slot="prefix" name="lock" size="40" color="#999"></u-icon>
            </u-form-item>
          </u-form>
        </view>
        
        <button type="primary" class="confirm-btn" @click="submit()">提交</button>
      </view>
      
      <view class="bottom-section">
        <text @click="gotoPath('/pages/login/index',false)" class="bottom-link">返回登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/common/code_api";
import user_api from "@/common/user_api";
export default {
  data() {
    return {
      is_wx: false,
      form: {
        mobile:'',
        code:'',
        password: '',
        captcha_key: '',
        captcha_code: '',
      },
      code_text:'获取验证码',
      get_code : true,
      captcha: {},
      mobile: '',
      password: '',
    };
  },
  onLoad() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      api.captcha().then(res => {
        this.captcha = res.data.captcha
      })
    },
    submit() {
      if (!this.form.mobile){
        this.$u.toast('请输入手机号');
        return;
      }
      if (!this.form.code){
        this.$u.toast('请输入验证码');
        return;
      }
      if (!this.form.password){
        this.$u.toast('请输入新密码');
        return;
      }

      uni.showModal({
        title: '',
        content: '确定提交保存吗？',
        success: (res) => {
          if (res.confirm) {
            user_api.forget_pwd(this.form).then(res => {
              this.$u.toast(res.msg);
              if (res.code !== 0) {
                return
              }
              let that = this
              setTimeout(function () {
                uni.navigateTo({
                  url: '/pages/login/index?account='+that.form.mobile
                })
              },500)
            })
          }
        }
      })
    },
    getCode() {
      if (!this.form.mobile){
        this.$u.toast('请输入手机号');
        return;
      }
      //验证手机号
      if (!this.form.mobile.match(/^1[3456789]\d{9}$/)) {
        this.$u.toast('请输入正确的手机号');
        return;
      }
      this.get_code = false
      this.form.captcha_key = this.captcha.key
      // 使用发送找回密码验证码的正确方式
      api.send_forget_code(this.form).then(res => {
        if (res.code == 0) {
          this.$u.toast(res.msg);
          //倒计时
          let count = 60;
          let timer = setInterval(() => {
            this.code_text = count + 's';
            count--;
            if (count < 0) {
              clearInterval(timer);
              this.code_text = '重新获取';
              this.get_code = true
            }
          }, 1000);
        } else {
          this.$u.toast(res.msg);
          this.getCaptcha()
          this.get_code = true
        }
      }).finally(()=>{
        
      })
    },
  }
}
</script>

<style lang='scss'>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  width: 90%;
  max-width: 650rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
  box-sizing: border-box;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 50rpx;
  
  .welcome-text {
    font-size: 42rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 15rpx;
    display: block;
  }
  
  .sub-text {
    font-size: 30rpx;
    color: #999;
    display: block;
  }
}

.wrapper {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 100%;
  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
  box-sizing: border-box;
}

.input-content {
  margin-bottom: 30rpx;
  
  ::v-deep .u-form-item {
    padding: 10rpx 0;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .u-input {
      background-color: #f8f9fa;
      border-radius: 14rpx;
      padding-left: 24rpx;
      height: 80rpx;
      font-size: 32rpx;
    }
    
    .u-button {
      height: 70rpx;
      line-height: 70rpx;
      border-radius: 14rpx;
      font-size: 28rpx;
      padding: 0 24rpx;
    }
  }
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(90deg, #42b479 0%, #3aa36b 100%);
  color: #fff;
  font-size: 36rpx;
  margin-top: 20rpx;

  &:after {
    border: none;
  }
  
  &[disabled] {
    background: #c0c4cc;
  }
}

.bottom-section {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .bottom-link {
    color: #42b479;
    font-size: 30rpx;
    cursor: pointer;
    padding: 0 15rpx;
  }
}

.captcha_box {
  .captcha {
    width: 200rpx;
    height: 70rpx;
    border-radius: 10rpx;
  }
}

// 隐藏原有元素
.title,
.register-section,
.wx,
.xieyi {
  display: none;
}
</style>